<template>
  <div style="min-width: 300px;width: 100%;">
    <el-form inline>
      <el-form-item v-if="temperature" :label="$t('Temperature')">
        {{temperature}}℃
      </el-form-item>
      <el-form-item v-if="humidity" :label="$t('Humidity')">
        {{humidity}}%
      </el-form-item>
      <el-form-item v-if="tvoc" label="TVOC">
        {{tvoc}}μg/m³
      </el-form-item>
      <el-form-item v-if="pm25" label="PM2.5">
        {{pm25}}μg/m³
      </el-form-item>
      <!-- <template v-if="otherMap"> -->
      <el-form-item v-for="(v,k,i) in otherMap" :key="'other_'+k+'_'+i" :label="k">
        {{v}}
      </el-form-item>
      <!-- </template> -->
    </el-form>
  </div>
</template>
<script>
  import BaseController from './BaseController'
  export default {
    name: 'EnvironmentChart',
    mixins: [BaseController],
    data() {
      return {
        temperature: null,
        humidity: null,
        tvoc: null,
        pm25: null,
        otherMap: {},
      }
    },
    mounted() {
      // this.$nextTick(this.createChart)
    },
    methods: {
      clearData() {
        this.temperature = null
        this.humidity = null
        this.tvoc = null
        this.pm25 = null
        this.otherMap = {}
      },
      setItemDevice(device) {
        if (!device) {
          return
        }
        const json = device.map
        if (!json) {
          return
        }
        if (device.code.indexOf('TH_RELAY_') >= 0) {
          if (json.AM2301) {
            const data = json.AM2301
            this.temperature = data.Temperature
            this.humidity = data.Humidity
          } else {
            this.temperature = null
            this.humidity = null
          }
          return
        }
        if (device.code.indexOf('PM_25_') >= 0) {
          if (json.PMS5003) {
            const data = json.PMS5003
            this.pm25 = data['PM2.5']
            // } else {
            //   this.pm25 = null
          }
          return
        }
        if (device.code.indexOf('TVOC_') >= 0) {
          this.tvoc = json['TVOC']
          const map = {}
          map[this.$t("device.PA")] = json.eCH2O + 'μg/m³'
          map["CO₂"] = json.eCO2 + "ppm"
          this.otherMap = Object.assign({}, map)
          return
        }
        if (device.code.indexOf('BleGate_') >= 0) {
          this.pm25 = json.PM2d5
          this.temperature = json.Temp
          this.humidity = json.Humi
          this.tvoc = json.TVOC
          const map = {}
          map["PM10"] = json.PM10d + 'μg/m³'
          map[this.$t("device.PA")] = json.CH2O + 'μg/m³'
          map["CO₂"] = json.CO2 + "ppm"
          map[this.$t("device.Smell")] = json.Smell + "μg/m³"
          if (json.Pre > 100) {
            var alt = json.Alt & 0xFFFFF;
            if ((alt & 0x80000) != 0) {
              alt = alt | 0xfff00000; //补码处理
            }
            map[this.$t("device.AP")] = json.Pre + 'Pa'
            map[this.$t("device.ASL")] = (alt / 1000.0) + "m";
          }
          this.otherMap = Object.assign({}, map)
          return
        }
        this.clearData()
      }
    }
  }

</script>
<style scoped>
  .el-form-item {
    margin-bottom: 0px !important;
  }

</style>
